<template>
    <div class="goods_cate">
      <category-List ref="cateGory" style="padding-bottom: 10px; border-bottom: 1px solid #eeeeee;"></category-List>
       <div class="ificationTitle" style="">
           <h1>{{$t('page.index.classification')}}</h1>
           <div style="display: flex; flex-wrap: wrap;">
             <div class="ClassificationContent"
             v-for="(item, index) in categoryLists"
             :key="index"
             @mouseover="mouhover1(index)"
             @mouseout="subscript1 = -1"
             style="width: 48%;"
             >
              <div class="">
                <img :src="item.pic" alt="">
              </div>
              <div class="" style="margin-left: 15px;">
                <h2>{{item.cate_name}}</h2>
                <span v-if="item.children.length>0"
                 class=""
                 v-for="(item1, index1) in item.children"
                 :key="index1"
                 style="display: flex; flex-wrap: wrap;"
                 >
                   <div @click="classifications(item2)" v-if="index1 == 0" class="" v-for="(item2, index2) in item1.children" :key="index2">
                     <span @mouseover="mouhover(index2)" @mouseout="subscript = -1" :style="subscript == index2 && subscript1 == index?'color:#f89900;font-size:15px;':'color:#000'" style="margin-right: 10px;" >{{item2.cate_name}}</span>
                   </div>
                </span>
              </div>
             </div>
           </div>
       </div>

      <!-- <div class="wrapper sort-count" style="display: flex; justify-content: start;">
         <div class=""  v-if="isshow !== '1'">
              <div class="classification" style="width: 140px; margin-top:-27px; border-right: 1px solid #eeeeee;">
                <div class="titles">
                  <span>{{$t('page.index.Category')}}</span>
                </div>
                <div>
                  <div class="category acea-row row-middle" >
                   <div @click="Allproducts()" class="products" style="">
                     <span id="" :style="isDanger == true && currer ==-1 ?'color:#f89900':'color:#000'" style="font-size: 14px;">
                      {{$t('page.index.AllProducts')}}
                     </span>
                   </div>
                   <div class="sort" :class="categoryLists.length > 10 ? 'sort-scroll' : ''">
                     <div
                       class="row-between-wrapper Eachproduct"
                       v-for="(item, index) in categoryLists"
                       :key="index"
                       style=" font-weight: 400;
                       padding: 10px 0;
                       cursor: pointer;
                       width: 140px;
                       "
                     >
                       <div style="font-size: 14px;display: flex; align-items: center;" class="" @click="goCate(item,index)">
                         <div style="width: 100px;text-overflow: ellipsis;">
                           <span :style="isDanger ==true && currer == index?'color:#f89900':'color:#000'">{{ item.cate_name }}</span>
                         </div>
                         <div>
                           <i v-if="item.isshows == false" :style="isDanger ==true && currer == index?'color:#f89900':'color:#000'" class="iconfont icon-you" style="margin-right: 0;font-size: 13px;"></i>
                           <i v-if="item.isshows == true" :style="isDanger ==true && currer == index?'color:red':'color:#f89900'" class="iconfont el-icon-arrow-down" style="margin-right: 0;font-size: 13px;"></i>
                         </div>
                       </div>
                       <div v-if="currer == index && ProductLevel.length > 0"
                       v-for="(item1, index1) in ProductLevel"
                       :key="index1"
                       @click="goCateOne(item1,index1)"
                        class="Secondaryproducts"
                        :style="trigger == true && triggerindex == index1?'color:#f89900':'color:#000'"
                       >
                         <div style="margin-top: 15px;width: 100px;text-overflow: ellipsis;">
                           <span style="text-indent: 10px;
                              font-size: 10px;
                              padding: 5px 0;">
                              {{item1.cate_name}}
                            </span>
                         </div>
                       </div>
                     </div>
                   </div>
                   </div>
                </div>
              </div>
         </div>

      </div> -->



      <div v-if="!productslist.length">
        <div class="noGoods">
          <div class="pictrue">
            <img src="../assets/images/noGoods.png">
          </div>
          <div class="name">{{$t('page.goodsList.empty')}}</div>
        </div>
      </div>
    </div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import categoryList from "@/components/categoryList";
export default {
      name: "goods_cate",
      auth: false,
      components: {
        categoryList
      },
      data(){
        return {
          triggerindex:-1,
          trigger:false,
          isDanger:false, //字体颜色
          changeIcon:false, //判断图表
          currer:-1, //一级商品下标
          ProductLevel:[], //商品二级
          current: -1,
          categoryLists: [],
          isCollect: false,
          storeList: [],
          brandList:[],
          brandCurrent:[],
          current:0,
          moreCurrent:0,
          seen:false,
          titleName:'',
          erCurrent:0,
          iSdefaults:0,
          productslist:[],
          pullRefreshss: true, // 代表可以进行下拉加载，false代表不能
          page: 1, //代表页面的初始页数
          limit:15,
          scollY: null,// 离底部距离有多少
          total: 0, //总页数
          title:this.$t('page.index.Dropdowntoloadmore'),
          cid:0,//一级分类
          sid:'',//二级分类
          order: '',
          priceOrder: '',
          rateOrder:'',
          SortOrder:'',
          price_on: '',
          price_off: '',
          news:0,
          is_multiple: false,
          checkedBrands: [],
          is_showMore: true,
          searchVal: '',
          search: '',
          storeLength: false,
          subscript:-1,
          subscript1:-1,
        }
      },
      async asyncData({app,query}){
        console.log('query',query)
        return {
          keyword: query.title ? query.title : '',
          isshow:query.inshow,
          isDanger:true,
          currer:query.index,
          sid: query.sid ? query.sid:'',
          titleName: query.name ? decodeURI(query.name).split(',') : '',
        }
      },
      watch:{
        $route: {
            handler: function(newVal, oldVal){
                this.keyword = newVal.query.title ? newVal.query.title : '';
                this.searchVal = newVal.query.title ? newVal.query.title : '';
                this.sid = newVal.query.sid ? newVal.query.sid : '';
                this.titleName = newVal.query.name ? decodeURI(newVal.query.name).split(',') : '';
                this.page = 1;
                this.getStoreList();
                this.getProductslist(1);
                this.getBrandList();
            },
            // 深度观察监听
            deep: true
        },
        is_multiple(n){
          this.checkedBrands = [];
          if(!n) {
            this.current = 0;
          }
        },
      },
      fetch({ store}) {
        store.commit("isBanner", false);
        store.commit('isHeader', true);
        store.commit('isFooter', true);
      },
      head() {
        return {
          title: this.$t('page.index.Categories') +"-"+this.$store.state.titleCon
        }
      },
      created() {

      },
      beforeMount(){
        this.searchVal = this.$route.query.title;
        this.sid = this.$route.query.sid || '';
        this.getProductslist('');
        if(this.keyword) this.getStoreList();
        this.getBrandList();
        this.getCategoryList();
      },
      mounted(){},
      beforeDestroy() {},
      methods:{
        classifications(item,index){
          console.log('item',item)
          this.$router.push({
            path: '/goods_cate',
            query: {
              sid: item.store_category_id,
              name: item.cate_name,
              index:index,
            }
          });
        },
        mouhover1(index){
          this.subscript1 = index
        },
        mouhover(index){
          // console.log('index',index);
          this.subscript = index
        },
        getCategoryList(){
            this.$axios.get("/api/store/product/category/lst").then(res=>{
                this.categoryLists = res.data.list;
                this.categoryLists.forEach(function(value,index){
                  value.isshows = false
                })
            })
        },
        bindSubmit(){
            this.getSelectedItem();
            this.getProductslist(1);
            this.getStoreList();
            this.getBrandList();
        },
        handleClose(){
            this.checkedBrands = [];
            this.searchVal = this.search = "";
            this.toggleMultiple();
            this.getProductslist(1);
            this.getStoreList();
            this.getBrandList();
        },
        toggleMultiple(){
          this.is_multiple = !this.is_multiple
          if(!this.is_multiple) this.search = ''
        },
        clearPrice(){
            this.price_on = this.price_off = "";
        },
        change(e){
            this.$forceUpdate()
        },
        /**获取品牌*/
        getBrandList(){
          let _this = this;
          _this.$axios.get('/api/store/product/brand/lst',{
            params:{
              limit: 999,
              keyword: _this.keyword,
              pid: _this.sid
            }
          }).then( (res) => {
            _this.brandList = res.data.list
            _this.brandList.unshift({
              'brand_id': '',
              'brand_name': this.$t('page.users.goodsCommentList.all')
            })
          }).catch(function (err) {
            _this.$message.error(err);
          })
        },
        Allproducts(){
          this.keyword = ''
          this.sid = ''
          this.getProductslist(1)
           this.isDanger = true
           this.currer = -1
        },
        goCateOne(item,index){
          this.keyword = item.cate_name
          this.sid = item.pid
          this.trigger = true
          this.triggerindex = index
          this.getProductslist(1)
        },
        goCate(item, index) {
          console.log('item',item)
          this.trigger = false
          this.keyword = item.cate_name
          this.sid = item.pid
          this.isDanger = true
            this.currer = index
          this.getProductslist(1)
          this.categoryLists.forEach(function(value,index){
            if(item.cate_name == value.cate_name){
              value.isshows = !value.isshows
            }else{
              value.isshows = false
            }
          })
          if(item.children.length>0){
            this.ProductLevel = item.children[0].children
            if(item.isshows == false){
             this.ProductLevel = []
            }
          }
          // if((index + 1) === this.titleName.length){
          //   return ;
          // }
          // const name = this.titleName.reduce((initial, val, idx) => {
          //   if (idx > index) {
          //     return initial;
          //   } else {
          //     initial.push(val);
          //     return initial;
          //   }
          // }, []);
          // this.$router.push({
          //   path: `/goods_cate`,
          //   query: {
          //     sid: item.split('_')[1],
          //     name: encodeURI(name.join(',')),
          //     // name: encodeURI(name.substring(0,name.length-1))
          //   }
          // })
        },
        /**取出多选选中的项 */
        getSelectedItem(){
            if(this.checkedBrands.length > 0){
                this.search = '';
                for(var i=0;i<this.checkedBrands.length;i++){
                    for(var j=0;j<this.brandList.length;j++){
                        if(this.checkedBrands[i] == this.brandList[j]['brand_id']){
                            this.search += this.brandList[j]['brand_name']+',';
                            this.search =  this.subStr(this.search,10)
                        }
                    }
                }
                this.search = this.search.substr(0, this.search.length - 1);
            }
        },
        /**超出省略号代替 */
        subStr(str,max){
            if(str.length > max){
                str = str.substring(0,max) + '...';
            }
             return str;
        },
        goDetail: function (item) {
          if(item.product_type == 1){
            this.$router.push({ path: '/goods_seckill_detail/'+item.product_id,query: { time: item.stop_time,status: item.seckill_status } });
          }else{
            this.$router.push({ path: '/goods_detail/'+item.product_id });
          }
        },
        /**进店逛逛 */
        goStore: function(id){
            this.$router.push({ path: `/store?id=${id}` });
        },
        /**店铺列表 */
        getStoreList(){
            let _this = this;

            if(!_this.keyword){
              _this.storeList = [];
              _this.storeLength = 0;
              return ;
            }

            _this.$axios.get('/api/store/merchant/lst',{
              params:{
                 keyword: _this.keyword ? _this.keyword  : '',
                 limit: 3
              }
            }).then(function (res) {
            _this.storeList = res.data.list;
            _this.storeLength = res.data.list.length > 2 ? true : false;
            if(_this.storeLength)_this.storeList.length = 2;
          }).catch(function (err) {
            _this.$message.error(err);
          })
        },
        getProductslist(num){
          let _this = this;
          _this.page = num ? num : _this.page;
          let  currentPage = {page: _this.page,limit:_this.limit,keyword: _this.keyword,brand_id: _this.checkedBrands.toString(),
            price_on: _this.price_on, price_off: _this.price_off, order: _this.order, cate_pid: _this.sid, common: 1
          };
          console.log('currentPage',currentPage)

          _this.$axios.get('/api/product/spu/lst', {
            params: currentPage
          }).then(function (res) {

            //console.log(res.data.list);

            _this.total = res.data.count;
            _this.productslist = res.data.list;
          }).catch(function (err) {
            _this.$message.error(err);
          })

        },
        // 分页点击
        bindPageCur(data){
            this.page = data
            this.getProductslist('');
        },
        category(index){
          this.checkedBrands = [];
          this.current = index;
          this.moreCurrent = index;
          this.brandCurrent = this.brandList[index].children;
          this.productslist = [];
          this.page = 1;
          this.erCurrent = 0;
          this.order = '';
          this.checkedBrands[0] = this.brandList[index]['brand_id'];
          this.getProductslist('');
        },
        defaults(){
          this.iSdefaults = 0;
          this.productslist = [];
          this.page = 1;
          this.order = '';
          this.priceOrder = '';
          // this.rateOrder = '';
          // this.SortOrder = '';
          this.getProductslist('');
        },
        priceSort(sort){
          this.iSdefaults = 2;
          this.productslist = [];
          this.page = 1;
          this.order = sort;
          this.priceOrder = sort;
          // this.rateOrder = '';
          // this.SortOrder = '';
          this.getProductslist('');
        },
        salesSort(sort){
          this.iSdefaults = 1;
          this.productslist = [];
          this.page = 1;
          this.order = sort;
          this.priceOrder = '';
          // this.rateOrder = '';
          // this.SortOrder = sort;
          this.getProductslist('');
        },
        salesRate(rate){
          this.iSdefaults = 3;
          this.productslist = [];
          this.page = 1;
          this.order = rate;
          this.priceOrder = '';
          // this.rateOrder = rate;
          // this.SortOrder = '';
          this.getProductslist('');
        }
      }
    }
</script>

<style scoped lang="scss">
  .ificationTitle{
    width: 1200px;
    margin: 0 auto;
    h1{
      font-weight: 700;
      font-size: 24px;
      color: var(--color-title);
      margin: 24px 0;
    }
    .ClassificationContent{
          border: 1px solid #eeeeee;
          padding: 24px;
          border-radius: 4px;
          margin: 0!important;
          margin-bottom: 20px!important;
          margin-right: 20px!important;
          height: 234px;
          cursor: pointer;
          display: flex;
          img{
                height: 170px;
                width: 170px;
                overflow: hidden;
                margin-right: 10px;
          }
          h2{
            font-weight: 700;
                font-size: 20px;
                color: var(--color-title);
                margin-bottom: 14px;
          }
          span{
            &:hover{
              color: #f89900;
            }
          }
    }
  }
  // 二级商品
  .Secondaryproducts{
    &:hover{
      color: #f89900 !important;
    }
  }
  // 分类左侧样式
  .classification{
    .titles{
      padding: 20px 0;
      font-size:16px;
      border-bottom: 1px solid #eee;
      color: #333333;
      font-weight: 600;
    }
    //全部商品
    .products{
     padding: 15px 0;
     width: 100%;
     // margin-top:15px;
     &:hover{
       border-right: 2px solid #f89900;
     }
    }
    // 每个商品
    .Eachproduct {
      &:hover{
        border-right: 2px solid #f89900;
      }
    }
  }
  // 分页
  .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #f89900 !important;
  }
  .stock {
    color: #969696;
    font-size: 12px;
    margin-top: 14px;
  }
  .trader{
    color: #fff;
    background-color: #e93323;
    display: inline-block;

    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 2px;
    margin-right: 5px;
    font-size: 12px;
  }
  .cate_name{
    cursor: pointer;
    &.on{
      color: #E93323
    }
  }
  .goods_cate{
    margin-top: 2px;
    .noGoods{
      text-align: center;
      .pictrue{
        width: 274px;
        height: 174px;
        margin: 130px auto 0 auto;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .name{
        font-size: 14px;
        color: #969696;
        margin-top: 20px;
        margin-bottom: 290px;
      }
    }
    .nav{
      width: 100%;
      height: 50px;
      &.showMore{
          height: auto;
          .list{
              height: auto;
          }
      }
      cursor: pointer;
      .navCon{
        padding: 0 17px;
        position: relative;
        &:after{
            content: '';
            display: inline-block;
            position: absolute;
            width: 1140px;
            border-bottom: 1px dotted #EFEFEF;
            bottom: 0;
            left: 60px;
        }
        &.wrapper_1200{
          overflow: unset!important;
          background-color: #fff;
        }
        height: 100%;
        .name{
            color: #969696;
            margin-right: 20px;
            line-height: 50px;
        }
        .moreCon{
          position: relative;
          height: 50px;
          .moreCategory{
            padding: 44px 44px 16px 44px;
            position: absolute;
            top:50px;
            right: -17px;
            width: 1200px;
            background-color: #fff;
            box-shadow: 0 3px 16px rgba(0, 0, 0, 0.06);
            .item{
              margin: 0 40px 28px 0;
              // &:hover{
              //   color: #E93323;
              // }
            }
          }
          .multiBtn{
              display: inline-block;
              width: 38px;
              height: 18px;
              line-height: 18px;
              border: 1px solid #C8C8C8;
              text-align: center;
              border-radius: 2px;
              margin-right: 18px;
          }
        }
        .list{
          height: 100%;
          width: 1020px;
          overflow: hidden;
          margin-right: 10px;
          .item{
            line-height: 50px;
            overflow: hidden;
            margin-right: 40px;

            &:hover{
              color: #E93323;
            }
          }
        }
        .more{
          position: relative;
          line-height: 50px;
          text-align: center;
          .iconfont{
            margin-left: 6px;
            font-size: 12px;
            color: #666666;
            display: inline-block;
            transition: all .1s ease;
            &.shouqi{
                 -moz-transform: rotateX(180deg);
                 -o-transform: rotateX(180deg);
                 -ms-transform: rotateX(180deg);
                 transform: rotateX(180deg);
            }
          }
        }
      }
    }
    .el-checkbox{
        height: 50px;
        line-height: 50px;
        color: #282828;
    }
    .title{
      color: #999999;
      height: 46px;
      line-height: 46px;
      .home{
        color: #282828;
      }
    }
    .sort-count{
        width: 1200px;
        margin: 0 auto;
    }
    .wrapper{
      background-color: #fff;
      padding: 25px 17px;
      cursor: pointer;
      .list{
        width: 1100px;
        border-bottom: 1px dotted #EFEFEF;
        padding-bottom: 10px;
        .item{
          margin-right: 30px;
          margin-bottom: 10px;
          &:hover{
            color: #E93323;
          }
        }
      }

      .sort{
        .item{
          margin-right: 30px;
          // &:hover{
          //   color: #E93323;
          // }
          .icon{
            font-size: 15px;
            margin-left: 5px;
          }
          .iconfont{
            font-size: 15px;
            color: #E2E2E2;
            margin-left: 5px;
          }
        }
        .name{
            color: #969696;
            margin-right: 20px;
        }
      }
    }
    .goods{
      width: 1220px;
      .item{
        width: 195px;
        height: 360px;
        background-color: #fff;
        padding: 16px 16px 16px 16px;
        cursor: pointer;
        transform: scale(1);
        transition: all 1s;
        margin-right: 15px;
        margin-bottom: 20px;
        &:hover {
          transform: scale(1.1);
          transition: all 1s;
          box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
          border: 1px solid #f9ad33 !important;
        }
        .pictrue{
          // width: 192px;
          height: 192px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .money{
          margin-top: 12px;
          .font-color{
            font-weight: bold;
            font-size: 22px;
          }
          .y_money{
            font-size: 12px;
            color: #AAAAAA;
            text-decoration: line-through;
            margin-left: 8px;
          }
          .label{
            width: 20px;
            height: 20px;
            background: linear-gradient(330deg, rgba(231, 85, 67, 0.15) 0%, rgba(244, 103, 83, 0.15) 100%);
            font-size: 12px;
            text-align: center;
            line-height: 20px;
          }
        }
        .name{
          color: #5A5A5A;
          margin-top: 8px;
          // height: 75px;
        }
        .bottom{
          font-size: 12px;
          color: #AAAAAA;
          margin-top: 10px;
        }
      }
    }
    .price-range{
        position: relative;
        top: -15px;
        padding: 10px;
        &:hover{
            box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
            .action-box{
                display: block;
            }
        }
        .action-box{
            display: none;
            position: absolute;
            left: 0;
            bottom: -50px;
            text-align: center;
            background: #F9F9F9;
            height: 50px;
            line-height: 50px;
            width: 100%;
            box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
            padding: 0 15px;
            overflow: hidden;
            .clear{
                float: left;
                color: #999999;
            }
            .submit{
                float: right;
                color: #666666;
                width: 60px;
                height: 30px;
                line-height: 30px;
                margin-top: 10px;
                background-color: #F1F1F1;
                border-radius: 2px;
                border: 1px solid #D4D4D4;
            }

        }
        .price-count{
            .input{
                width: 80px;
                height: 32px;
                position: relative;

                    &:before{
                        content: '$';
                        display: inline-block;
                        color: #D4D4D4;
                        position: absolute;
                        left: 5px;
                        top: 0;
                        line-height: 32px;
                    }
                /deep/ .el-input__inner{
                    height: 32px;
                    line-height: 32px;
                    padding-left: 18px;
                }
            }
        }
    }
    .search-count{
        display: inline-block;
        background-color: #fff;
        height: 26px;
        line-height: 26px;
        color: #282828;
        padding: 0 10px;
        margin-bottom: 15px;
        .search-selected{
            display: inline-block;
            min-width: 100px;
            max-width: 200px;
            /deep/ .el-input__inner{
                border: none;
                height: 26px;
                line-height: 26px;
                color: #969696;
            }
        }
        .el-icon-close{
            cursor: pointer;
            color: #969696;
            font-size: 12px;
        }
    }
  }
  .search-store{
      width: 1200px;
      margin: 0 auto 20px;
      border-radius: 4px;
      overflow: hidden;
      .moreBtn{
        width: 32px;
        height: 76px;
        padding: 10px 0;
        background-color: #fff;
        color: #999999;
        text-align: center;
        font-size: 12px;
        float: left;
            .iconfont{
                display: block;
                font-size: 8px;
                border: 1px solid #8B8B8B;
                border-radius: 100%;
                width: 11px;
                height: 11px;
                line-height: 11px;
                text-align: center;
                margin: 3px auto 0;
            }
        }
      .store-count{
          overflow: hidden;
          width: 100%;
          .item{
              height: 96px;
              width: 100%;
              -webkit-justify-content: space-between;
              justify-content: space-between;
              padding: 0 17px;
              background-color: #fff;
          }
          &.moreStore{
               float: left;
               width: auto;
              .item{
                width: 570px;
                float: left;
                margin-right: 14px;
              }
          }
          .store-name{
              align-items: center;
              .image{
                width: 61px;
                height: 61px;
                border-radius: 100%;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .name{
                margin-left: 15px;
                color: #282828;
                line-height: 26px;
                >span{
                    display: block;
                    color: #999999;
                }
            }
          }
          .store-go{
              align-items: center;
              .store-btn{
                  width: 78px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  border-radius: 4px;
                  font-size: 12px;
                  &.goIn{
                      color: #fff;
                      background-color: #E93323;
                      margin-right: 12px;
                      border: 1px solid #E93323;
                  }
                  &.collect{
                     color: #E93323;
                     border: 1px solid #E93323;
                     background-color: #fff;
                  }
                  &.hasCollect{
                      color: #999999;
                      border-color: #999999;
                  }
              }
          }

      }
  }
  .select-footer{
      text-align: center;
      margin: 30px 0;
  }
</style>
